<template>
  <view class="user-bg">
    <!-- 背景图片 -->
    <image class="bg-image" src="/static/bg.jpg" mode="aspectFill"></image>
    <!-- 自定义顶部栏 -->
    <view class="custom-navbar">
      <view class="navbar-title">个人中心</view>
      <view class="navbar-right"></view>
    </view>
    <!-- 头像昵称区 -->
    <view class="user-info">
      <image class="avatar" :src="userInfo.avatar || '/static/avatar-default.png'" />
      <view class="user-meta">
        <view class="user-nick">{{ userInfo.nickname || '小野同学' + userInfo.uid }}</view>
        <view class="edit-link" @tap="onEditProfile">
          <image src="/static/icon-edit-info.png" class="edit-icon" /> 编辑个人资料
        </view>
      </view>
    </view>
    <!-- 未登录状态显示登录按钮 -->
    <view v-if="!isLoggedIn" class="login-section">
      <button class="login-btn" @tap="showLoginModal = true">立即登录</button>
    </view>
    <!-- 已登录状态显示会员卡 -->
    <view v-else class="vip-card"> 
      <image src="/static/icon-vip.png" class="vip-icon" />
      <view class="vip-info">
        <text>会员卡到期时间 {{ userInfo.vipExpire || '----年--月--日' }}</text>
      </view>
      <button class="vip-btn" @tap="onRenewVip">去续费</button>
    </view>
    <!-- 烤友码 -->
    <view v-if="isLoggedIn" class="card glass-effect code-card">
      <view class="code-row">
        <image src="/static/icon-code.png" class="code-icon" />
        <text class="code-label">烤友码</text>
        <text class="code-value">{{ userInfo.code || 'XY0000034998' }}</text>
        <button class="share-btn" @tap="onShareCode">分享</button>
      </view>
    </view>
    <!-- 功能列表1 -->
    <view class="card glass-effect">
      <view class="list-item" v-for="item in list1" :key="item.key" @tap="onListTap(item)">
        <image :src="item.icon" class="item-icon" />
        <text class="item-label">{{ item.label }}</text>
        <image src="/static/icon-arrow.png" class="arrow-icon" />
      </view>
    </view>
    <!-- 功能列表2 -->
    <view class="card glass-effect">
      <view class="list-item" v-for="item in list2" :key="item.key" @tap="onListTap(item)">
        <image :src="item.icon" class="item-icon" />
        <text class="item-label">{{ item.label }}</text>
        <image src="/static/icon-arrow.png" class="arrow-icon" />
      </view>
    </view>

    <!-- 登录弹窗 -->
    <login-modal :visible.sync="showLoginModal" />
  </view>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import LoginModal from '@/components/LoginModal.vue'

export default {
  components: {
    LoginModal
  },
  data() {
    return {
      showLoginModal: false,
      userInfo: {
        uid: '14991',
        avatar: '',
        nickname: '',
        vipExpire: '',
        code: ''
      },
      list1: [
        { key: 'buy', label: '购买记录', icon: '/static/icon-buy.png' },
        { key: 'publish', label: '我的发布', icon: '/static/icon-publish.png' },
        { key: 'download', label: '我的下载', icon: '/static/icon-download.png' },
        { key: 'practice', label: '我的做题', icon: '/static/icon-practice.png' }
      ],
      list2: [
        { key: 'setting', label: '系统设置', icon: '/static/icon-setting.png' },
        { key: 'contact', label: '联系我们', icon: '/static/icon-contact.png' },
        { key: 'feedback', label: '意见反馈', icon: '/static/icon-feedback.png' },
        { key: 'logout', label: '退出登录', icon: '/static/icon-logout.png' }
      ]
    }
  },
  computed: {
    ...mapState('user', ['isLoggedIn'])
  },
  onLoad() {
    this.fetchUserInfo();
  },
  methods: {
    ...mapActions('user', ['logout']),
    // 预留：获取用户信息接口
    async fetchUserInfo() {
      // TODO: 调用后端API获取用户信息
      // const res = await uni.request({ url: '/api/user/info' })
      // this.userInfo = res.data
    },
    // 预留：编辑个人资料
    onEditProfile() {
      // TODO: 跳转到个人资料编辑页
    },
    // 预留：去续费
    onRenewVip() {
      // TODO: 跳转到会员续费页
    },
    // 预留：分享烤友码
    onShareCode() {
      // TODO: 分享功能
    },
    // 功能列表点击
    async onListTap(item) {
      if (item.key === 'logout') {
        // 显示确认弹窗
        uni.showModal({
          title: '提示',
          content: '确定要退出登录吗？',
          success: async (res) => {
            if (res.confirm) {
              try {
                await this.logout()
                uni.showToast({
                  title: '已退出登录',
                  icon: 'success'
                })
                // 重置用户信息
                this.userInfo = {
                  uid: '',
                  avatar: '',
                  nickname: '',
                  vipExpire: '',
                  code: ''
                }
              } catch (error) {
                uni.showToast({
                  title: '退出登录失败',
                  icon: 'none'
                })
              }
            }
          }
        })
      } else {
        // TODO: 其他功能跳转
      }
    }
  }
}
</script>

<style lang="scss">
.user-bg {
  min-height: 100vh;
  position: relative;
  padding-bottom: 32rpx;
}
.bg-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.custom-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  padding: 0 24rpx;
  background: transparent;
  padding-top: calc(env(safe-area-inset-top) + 70px);
  box-sizing: border-box;
  margin-bottom: 20rpx;
}
.navbar-left {
  display: flex;
  align-items: center;
  gap: 12rpx;
}
.navbar-title {
  flex: 1;
  text-align: center;
  font-size: 32rpx;
  color: #222;
  font-weight: bold;
  margin-left: 48rpx;
}
.navbar-right {
  width: 48rpx;
  height: 48rpx;
}
.user-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx 32rpx 0 32rpx;
}
.user-title {
  font-size: 32rpx;
  color: #222;
  font-weight: bold;
  flex: 1;
  text-align: center;
}
.user-header-btns {
  display: flex;
  gap: 16rpx;
}
.icon-btn {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  background: #fff;
  border: none;
  font-size: 28rpx;
  color: #222;
  box-shadow: 0 2rpx 8rpx 0 rgba(24,60,107,0.08);
}
.user-info {
  display: flex;
  align-items: center;
  padding: 32rpx 32rpx 0 32rpx;
}
.avatar {
  width: 108rpx;
  height: 108rpx;
  border-radius: 50%;
  background: #fff;
  border: 4rpx solid #eaeaea;
}
.user-meta {
  margin-left: 32rpx;
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}
.user-nick {
  font-size: 36rpx;
  color: #283b66;
  font-weight: bold;
}
.edit-link {
  font-size: 24rpx;
  color: #8a98b3;
  display: flex;
  align-items: center;
  gap: 8rpx;
}
.edit-icon {
  width: 28rpx;
  height: 28rpx;
}
.vip-card {
  margin: 32rpx 32rpx 0 32rpx;
  background: linear-gradient(90deg, #ffe3b0 0%, #ffd6a0 100%);
  border-radius: 24rpx;
  display: flex;
  align-items: center;
  padding: 24rpx 32rpx;
  box-shadow: 0 2rpx 8rpx 0 rgba(24,60,107,0.06);
  position: relative;
}
.vip-icon {
  width: 48rpx;
  height: 48rpx;
  margin-right: 18rpx;
}
.vip-info {
  flex: 1;
  font-size: 26rpx;
  color: #283b66;
}
.vip-btn {
  background: #283b66;
  color: #fff;
  border-radius: 32rpx;
  font-size: 26rpx;
  padding: 0 32rpx;
  height: 56rpx;
  line-height: 56rpx;
  border: none;
}
.card {
  margin: 32rpx 32rpx 0 32rpx;
  border-radius: 24rpx;
  background: rgba(255,255,255,0.7);
  box-shadow: 0 2rpx 8rpx 0 rgba(24,60,107,0.06);
  padding: 0 0 0 0;
}
.glass-effect {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.code-card {
  padding: 0;
}
.code-row {
  display: flex;
  align-items: center;
  padding: 0 32rpx;
  height: 96rpx;
}
.code-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 12rpx;
}
.code-label {
  font-size: 28rpx;
  color: #283b66;
  margin-right: 18rpx;
}
.code-value {
  font-size: 28rpx;
  color: #222;
  font-weight: bold;
  flex: 1;
}
.share-btn {
  background: #283b66;
  color: #fff;
  border-radius: 32rpx;
  font-size: 24rpx;
  padding: 0 28rpx;
  height: 56rpx;
  line-height: 56rpx;
  border: none;
}
.list-item {
  display: flex;
  align-items: center;
  padding: 0 32rpx;
  height: 96rpx;
  border-bottom: 1px solid #f0f0f0;
}
.list-item:last-child {
  border-bottom: none;
}
.item-icon {
  width: 36rpx;
  height: 36rpx;
  margin-right: 18rpx;
}
.item-label {
  font-size: 28rpx;
  color: #283b66;
  flex: 1;
}
.arrow-icon {
  width: 24rpx;
  height: 24rpx;
}
.login-section {
  margin: 32rpx 32rpx 0 32rpx;
  padding: 48rpx 32rpx;
  background: rgba(255,255,255,0.7);
  border-radius: 24rpx;
  text-align: center;
  
  .login-btn {
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    background: #07c160;
    color: #fff;
    font-size: 32rpx;
    border-radius: 44rpx;
  }
}
</style> 